<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>佣金提现</title>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.4.2/css/all.min.css" rel="stylesheet">
    <style>
        body {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
        }
        .glass-card {
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.2);
        }
        .balance-card {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            border: 2px solid rgba(255, 255, 255, 0.3);
        }
        .record-card {
            background: rgba(255, 255, 255, 0.95);
            transition: all 0.3s ease;
        }
        .record-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
        }
        .status-success {
            background: linear-gradient(135deg, #10b981, #059669);
        }
        .status-pending {
            background: linear-gradient(135deg, #f59e0b, #d97706);
        }
        .status-failed {
            background: linear-gradient(135deg, #ef4444, #dc2626);
        }
        .withdrawal-form {
            background: rgba(255, 255, 255, 0.98);
        }
    </style>
</head>
<body>
    <!-- 状态栏 -->
    <div class="flex justify-between items-center px-4 py-2 bg-black text-white text-sm">
        <span>9:41</span>
        <div class="flex items-center space-x-1">
            <i class="fas fa-signal"></i>
            <i class="fas fa-wifi"></i>
            <i class="fas fa-battery-three-quarters"></i>
        </div>
    </div>

    <!-- 主要内容 -->
    <div class="px-4 py-6">
        <!-- 头部 -->
        <div class="flex items-center justify-between mb-6">
            <button class="text-white" onclick="history.back()">
                <i class="fas fa-arrow-left text-xl"></i>
            </button>
            <h1 class="text-xl font-bold text-white">佣金提现</h1>
            <button class="text-white" onclick="showWithdrawalRules()">
                <i class="fas fa-question-circle text-xl"></i>
            </button>
        </div>

        <!-- 余额卡片 -->
        <div class="balance-card rounded-2xl p-6 mb-6 text-white">
            <div class="flex items-center justify-between mb-4">
                <div>
                    <div class="text-sm opacity-80">可提现余额</div>
                    <div class="text-3xl font-bold">¥12,580.50</div>
                </div>
                <div class="text-right">
                    <div class="text-sm opacity-80">累计收益</div>
                    <div class="text-xl font-semibold">¥25,680.00</div>
                </div>
            </div>
            
            <div class="grid grid-cols-2 gap-4 mb-4">
                <div class="text-center">
                    <div class="text-lg font-bold">¥8,560.00</div>
                    <div class="text-xs opacity-80">本月收益</div>
                </div>
                <div class="text-center">
                    <div class="text-lg font-bold">¥4,020.50</div>
                    <div class="text-xs opacity-80">待结算</div>
                </div>
            </div>
            
            <button class="w-full bg-white text-purple-600 py-3 rounded-xl font-semibold" onclick="showWithdrawalForm()">
                <i class="fas fa-money-bill-wave mr-2"></i>立即提现
            </button>
        </div>

        <!-- 快速操作 -->
        <div class="grid grid-cols-3 gap-3 mb-6">
            <button class="glass-card rounded-xl p-3 text-center text-white" onclick="viewEarningsDetail()">
                <i class="fas fa-chart-line text-2xl mb-2"></i>
                <div class="text-sm">收益明细</div>
            </button>
            <button class="glass-card rounded-xl p-3 text-center text-white" onclick="viewWithdrawalHistory()">
                <i class="fas fa-history text-2xl mb-2"></i>
                <div class="text-sm">提现记录</div>
            </button>
            <button class="glass-card rounded-xl p-3 text-center text-white" onclick="bindBankCard()">
                <i class="fas fa-credit-card text-2xl mb-2"></i>
                <div class="text-sm">银行卡</div>
            </button>
        </div>

        <!-- 提现记录 -->
        <div class="mb-4">
            <div class="flex items-center justify-between mb-3">
                <h2 class="text-lg font-bold text-white">最近提现记录</h2>
                <button class="text-white text-sm" onclick="viewAllRecords()">
                    查看全部 <i class="fas fa-chevron-right ml-1"></i>
                </button>
            </div>
            
            <!-- 筛选按钮 -->
            <div class="flex space-x-2 mb-4">
                <button class="px-4 py-2 bg-white text-purple-600 rounded-full text-sm font-medium" onclick="filterRecords('all')">全部</button>
                <button class="px-4 py-2 bg-white bg-opacity-20 text-white rounded-full text-sm" onclick="filterRecords('success')">成功</button>
                <button class="px-4 py-2 bg-white bg-opacity-20 text-white rounded-full text-sm" onclick="filterRecords('pending')">处理中</button>
                <button class="px-4 py-2 bg-white bg-opacity-20 text-white rounded-full text-sm" onclick="filterRecords('failed')">失败</button>
            </div>
        </div>

        <!-- 提现记录列表 -->
        <div class="space-y-4" id="recordsList">
            <!-- 成功记录 -->
            <div class="record-card rounded-xl p-4" data-status="success">
                <div class="flex items-center justify-between mb-2">
                    <div class="flex items-center">
                        <div class="w-10 h-10 bg-green-100 rounded-full flex items-center justify-center mr-3">
                            <i class="fas fa-check text-green-600"></i>
                        </div>
                        <div>
                            <div class="font-semibold text-gray-800">提现成功</div>
                            <div class="text-sm text-gray-500">2024-01-15 14:30</div>
                        </div>
                    </div>
                    <div class="text-right">
                        <div class="text-lg font-bold text-gray-800">¥2,500.00</div>
                        <div class="status-success text-white px-2 py-1 rounded-full text-xs">
                            已到账
                        </div>
                    </div>
                </div>
                <div class="text-sm text-gray-500 pl-13">
                    提现至：招商银行(****1234) • 手续费：¥5.00
                </div>
            </div>

            <!-- 处理中记录 -->
            <div class="record-card rounded-xl p-4" data-status="pending">
                <div class="flex items-center justify-between mb-2">
                    <div class="flex items-center">
                        <div class="w-10 h-10 bg-yellow-100 rounded-full flex items-center justify-center mr-3">
                            <i class="fas fa-clock text-yellow-600"></i>
                        </div>
                        <div>
                            <div class="font-semibold text-gray-800">提现处理中</div>
                            <div class="text-sm text-gray-500">2024-01-18 09:15</div>
                        </div>
                    </div>
                    <div class="text-right">
                        <div class="text-lg font-bold text-gray-800">¥1,800.00</div>
                        <div class="status-pending text-white px-2 py-1 rounded-full text-xs">
                            处理中
                        </div>
                    </div>
                </div>
                <div class="text-sm text-gray-500 pl-13">
                    提现至：工商银行(****5678) • 预计1-3个工作日到账
                </div>
            </div>

            <!-- 失败记录 -->
            <div class="record-card rounded-xl p-4" data-status="failed">
                <div class="flex items-center justify-between mb-2">
                    <div class="flex items-center">
                        <div class="w-10 h-10 bg-red-100 rounded-full flex items-center justify-center mr-3">
                            <i class="fas fa-times text-red-600"></i>
                        </div>
                        <div>
                            <div class="font-semibold text-gray-800">提现失败</div>
                            <div class="text-sm text-gray-500">2024-01-12 16:45</div>
                        </div>
                    </div>
                    <div class="text-right">
                        <div class="text-lg font-bold text-gray-800">¥3,200.00</div>
                        <div class="status-failed text-white px-2 py-1 rounded-full text-xs">
                            已退回
                        </div>
                    </div>
                </div>
                <div class="text-sm text-gray-500 pl-13">
                    失败原因：银行卡信息有误 • 金额已退回账户
                </div>
            </div>
        </div>

        <!-- 提现说明 -->
        <div class="mt-6">
            <div class="glass-card rounded-xl p-4">
                <h3 class="text-white font-semibold mb-3">
                    <i class="fas fa-info-circle mr-2"></i>提现说明
                </h3>
                <div class="space-y-2 text-white text-sm opacity-90">
                    <div>• 最低提现金额：¥100</div>
                    <div>• 提现手续费：2‰，最低¥2，最高¥25</div>
                    <div>• 工作日提现，1-3个工作日到账</div>
                    <div>• 每日提现次数限制：3次</div>
                    <div>• 提现时间：09:00-18:00</div>
                </div>
            </div>
        </div>
    </div>

    <!-- 提现表单弹窗 -->
    <div id="withdrawalModal" class="fixed inset-0 bg-black bg-opacity-50 hidden z-50">
        <div class="flex items-center justify-center min-h-screen px-4">
            <div class="withdrawal-form rounded-2xl p-6 w-full max-w-sm">
                <div class="flex items-center justify-between mb-4">
                    <h3 class="text-lg font-bold text-gray-800">申请提现</h3>
                    <button onclick="hideWithdrawalForm()" class="text-gray-500">
                        <i class="fas fa-times text-xl"></i>
                    </button>
                </div>
                
                <div class="mb-4">
                    <label class="block text-sm font-medium text-gray-700 mb-2">提现金额</label>
                    <div class="relative">
                        <input type="number" id="withdrawalAmount" placeholder="请输入提现金额" 
                               class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent">
                        <span class="absolute right-3 top-3 text-gray-500">元</span>
                    </div>
                    <div class="flex justify-between mt-2">
                        <span class="text-sm text-gray-500">可提现：¥12,580.50</span>
                        <button class="text-sm text-purple-600" onclick="setMaxAmount()">全部提现</button>
                    </div>
                </div>
                
                <div class="mb-4">
                    <label class="block text-sm font-medium text-gray-700 mb-2">提现账户</label>
                    <div class="border border-gray-300 rounded-lg p-3">
                        <div class="flex items-center justify-between">
                            <div class="flex items-center">
                                <i class="fas fa-university text-blue-500 mr-3"></i>
                                <div>
                                    <div class="font-medium text-gray-800">招商银行</div>
                                    <div class="text-sm text-gray-500">****1234</div>
                                </div>
                            </div>
                            <button class="text-purple-600 text-sm" onclick="changeBankCard()">
                                更换
                            </button>
                        </div>
                    </div>
                </div>
                
                <div class="mb-6">
                    <div class="bg-yellow-50 border border-yellow-200 rounded-lg p-3">
                        <div class="text-sm text-yellow-800">
                            <i class="fas fa-exclamation-triangle mr-2"></i>
                            手续费：<span id="feeAmount">¥0.00</span>，实际到账：<span id="actualAmount">¥0.00</span>
                        </div>
                    </div>
                </div>
                
                <div class="flex space-x-3">
                    <button class="flex-1 bg-gray-200 text-gray-800 py-3 rounded-lg font-medium" onclick="hideWithdrawalForm()">
                        取消
                    </button>
                    <button class="flex-1 bg-purple-600 text-white py-3 rounded-lg font-medium" onclick="submitWithdrawal()">
                        确认提现
                    </button>
                </div>
            </div>
        </div>
    </div>

    <script>
        /**
         * 筛选提现记录
         * @param {string} status - 记录状态
         */
        function filterRecords(status) {
            // 更新按钮状态
            document.querySelectorAll('button').forEach(btn => {
                if (btn.textContent.includes('全部') || btn.textContent.includes('成功') || 
                    btn.textContent.includes('处理中') || btn.textContent.includes('失败')) {
                    btn.classList.remove('bg-white', 'text-purple-600');
                    btn.classList.add('bg-white', 'bg-opacity-20', 'text-white');
                }
            });
            
            event.target.classList.remove('bg-white', 'bg-opacity-20', 'text-white');
            event.target.classList.add('bg-white', 'text-purple-600');
            
            // 筛选记录
            const records = document.querySelectorAll('.record-card');
            records.forEach(record => {
                if (status === 'all') {
                    record.style.display = 'block';
                } else {
                    const recordStatus = record.getAttribute('data-status');
                    record.style.display = recordStatus === status ? 'block' : 'none';
                }
            });
        }
        
        /**
         * 显示提现表单
         */
        function showWithdrawalForm() {
            document.getElementById('withdrawalModal').classList.remove('hidden');
            document.body.style.overflow = 'hidden';
        }
        
        /**
         * 隐藏提现表单
         */
        function hideWithdrawalForm() {
            document.getElementById('withdrawalModal').classList.add('hidden');
            document.body.style.overflow = 'auto';
            // 清空表单
            document.getElementById('withdrawalAmount').value = '';
            updateFeeCalculation();
        }
        
        /**
         * 设置最大提现金额
         */
        function setMaxAmount() {
            document.getElementById('withdrawalAmount').value = '12580.50';
            updateFeeCalculation();
        }
        
        /**
         * 更新手续费计算
         */
        function updateFeeCalculation() {
            const amount = parseFloat(document.getElementById('withdrawalAmount').value) || 0;
            const feeRate = 0.002; // 2‰
            let fee = amount * feeRate;
            
            // 手续费限制：最低¥2，最高¥25
            if (fee < 2) fee = 2;
            if (fee > 25) fee = 25;
            if (amount === 0) fee = 0;
            
            const actualAmount = amount - fee;
            
            document.getElementById('feeAmount').textContent = `¥${fee.toFixed(2)}`;
            document.getElementById('actualAmount').textContent = `¥${actualAmount.toFixed(2)}`;
        }
        
        /**
         * 提交提现申请
         */
        function submitWithdrawal() {
            const amount = parseFloat(document.getElementById('withdrawalAmount').value);
            
            if (!amount || amount < 100) {
                alert('提现金额不能少于¥100');
                return;
            }
            
            if (amount > 12580.50) {
                alert('提现金额不能超过可提现余额');
                return;
            }
            
            if (confirm(`确认提现 ¥${amount.toFixed(2)} 吗？`)) {
                alert('提现申请已提交，请耐心等待处理');
                hideWithdrawalForm();
                // 实际项目中调用提现API
            }
        }
        
        /**
         * 更换银行卡
         */
        function changeBankCard() {
            alert('跳转到银行卡管理页面');
            // 实际项目中跳转到银行卡管理
        }
        
        /**
         * 查看收益明细
         */
        function viewEarningsDetail() {
            alert('查看收益明细');
            // 实际项目中跳转到收益明细页面
        }
        
        /**
         * 查看提现历史
         */
        function viewWithdrawalHistory() {
            alert('查看完整提现历史');
            // 实际项目中跳转到提现历史页面
        }
        
        /**
         * 绑定银行卡
         */
        function bindBankCard() {
            alert('绑定银行卡');
            // 实际项目中跳转到银行卡绑定页面
        }
        
        /**
         * 查看全部记录
         */
        function viewAllRecords() {
            alert('查看全部提现记录');
            // 实际项目中跳转到完整记录页面
        }
        
        /**
         * 显示提现规则
         */
        function showWithdrawalRules() {
            alert('提现规则说明:\n\n1. 最低提现金额：¥100\n2. 手续费：2‰，最低¥2，最高¥25\n3. 工作日提现，1-3个工作日到账\n4. 每日提现次数限制：3次\n5. 提现时间：09:00-18:00');
        }
        
        /**
         * 页面加载完成后的初始化
         */
        document.addEventListener('DOMContentLoaded', function() {
            // 监听提现金额输入变化
            document.getElementById('withdrawalAmount').addEventListener('input', updateFeeCalculation);
            
            console.log('佣金提现页面加载完成');
        });
    </script>
</body>
</html>